<template>
  <div>
    <el-row style="height:100px">
      <Tool :navs="navs" />
    </el-row>
    <el-row style="margin-top:100px">
      <div class="photo">
        <div v-for="(path, cl) in info" :key="path" class="ContainerQaPhono">
          <div :ref="path" :class="`box imgi ${status1} ${status2 + cl}`"><img :src="path"></div>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
import Tool from './components/tools'
export default {
  name: 'ContainerQaPhono',
  components: {
    Tool
  },
  data() {
    return {
      status1: '',
      status2: '',
      info: this.getList(),
      navs: [{
        'name': 'baidu',
        'imgPath': require('../../assets/tool/baidu.jpg'),
        'url': 'https://www.baidu.com'
      },
      {
        'name': 'yapi',
        'imgPath': require('../../assets/tool/yapi.png'),
        'url': 'http://192.168.2.92:3000'
      },
      {
        'name': 'jenkins',
        'imgPath': require('../../assets/tool/jenkins.png'),
        'url': 'http://jenkins.3imx.cn'
      },
      {
        'name': 'mantis',
        'imgPath': require('../../assets/tool/mantis.png'),
        'url': 'http://mantis.kcimg.cn'
      },
      {
        'name': 'harbor',
        'imgPath': require('../../assets/tool/harbor.png'),
        'url': 'http://qa-harbor.3imx.cn'
      },
      {
        'name': 'baota',
        'imgPath': require('../../assets/tool/baota.png'),
        'url': 'http://192.168.2.98:8888/'
      },
      {
        'name': 'flower',
        'imgPath': require('../../assets/tool/flower.png'),
        'url': 'http://qa-flower.3imx.cn/'
      },
      {
        'name': 'sonar',
        'imgPath': require('../../assets/tool/sonar.png'),
        'url': 'https://sonar.3imx.cn/about'
      },
      {
        'name': 'gitlab',
        'imgPath': require('../../assets/tool/gitlab.png'),
        'url': 'http://gitlab.360che.com/qa'
      },
      {
        'name': 'yuque',
        'imgPath': require('../../assets/tool/yuque.png'),
        'url': 'https://360che.yuque.com/technology_team/qa'
      },
      {
        'name': 'agileTC',
        'imgPath': require('../../assets/tool/agileTC.png'),
        'url': 'http://192.168.2.98:8094/'
      }]
    }
  },
  created() {
    console.log(process.env.VUE_APP_BASE_API)
    this.getList()
    setTimeout(() => {
      this.status1 = 'i'
    }, 1000)
    setTimeout(() => {
      this.status2 = 'img'
    }, 1100)
  },
  methods: {
    getList() {
      this.p_l = { 'img1': 'zhoujian.png', 'img2': 'limeng.jpg', 'img3': 'liuwenfan.jpg', 'img4': 'xiaoyu.jpg', 'img5': 'xingmeng.jpg', 'img6': 'xuzishen.jpg', 'img7': 'yanxia.jpg', 'img8': 'zhangchen.jpg', 'img9': 'zhouwenjie.png', 'img10': 'hedan.png' }
      var phono = []
      for (const i in this.p_l) {
        phono.push(require('../../assets/pic/' + this.p_l[i]))
      }
      return phono
    }
  }
}

</script>
<style scoped>
.ContainerQaPhono {
  width: 80%;
  height: 100%;
  margin: 80px 70px;
  position: relative;
}

.box {
  width: 210px;
  transition: 0.1s;
  height: 100%;
  -moz-transition: 1s;
  -webkit-transition: 1s;
  position: absolute;
}

img {
  width: 100%;
  padding: 10px 10px 15px 10px;
  border: 1px solid #ddd;
  /*position:absolute;  */

  z-index: 1;
}

.box:hover {
  -webkit-transform: rotate(0deg) !important;
  transform: scale(1.5) !important;
  -webkit-transform: scale(1.5) !important;
  box-shadow: 4px 4px 10px #ccc !important;
  -moz-box-shadow: 4px 4px 10px #ccc !important;
  -webkit-box-shadow: 4px 4px 10px #ccc !important;
  z-index: 1 !important;

}

.imgi {
  margin-left: 50%;
  top: 0px;
  left: 0px;
  -webkit-transform: rotate(0deg);
}

.i {
  margin-left: 10%;
  top: 0px;
  left: 0px;
  -webkit-transform: rotate(0deg);
}

/*二狗*/
.img1 {
  margin-left: 50%;
  top: 200px;
  left: -690px;
  -webkit-transform: rotate(-40deg);
}

/*文凡*/
.img2 {
  top: 10px;
  left: -60px;
  -webkit-transform: rotate(-20deg);
}

/*小宇*/
.img3 {
  top: -20px;
  left: 750px;
  -webkit-transform: rotate(-20deg);
}

/*猛*/
.img4 {
  top: 270px;
  left: 1100px;
  -webkit-transform: rotate(30deg);

}

/*子深*/
.img5 {
  top: 200px;
  left: 230px;
  -webkit-transform: rotate(-20deg);
}

/*艳霞*/
.img6 {
  top: 200px;
  left: 814px;
  -webkit-transform: rotate(10deg);
}

/*晨*/
.img7 {
  top: 100px;
  left: 250px;
  -webkit-transform: rotate(20deg);
}

/*文洁*/
.img8 {
  top: 10px;
  left: 1100px;
  -webkit-transform: rotate(10deg);
}

/*蛋*/
.img9 {
  top: 70px;
  left: 550px;
  -webkit-transform: rotate(00deg);
}

.img10 {
  top: 240px;
  left: 290px;
  -webkit-transform: rotate(40deg);
}

.img11 {
  top: 00px;
  left: 300px;
  -webkit-transform: rotate(50deg);
}

.img12 {
  top: 200px;
  left: 300px;
  -webkit-transform: rotate(50deg);
}

.img13 {
  top: 400px;
  left: 700px;
  -webkit-transform: rotate(-10deg);
}

.img14 {
  top: 320px;
  left: 150px;
  -webkit-transform: rotate(-30deg);
}

.img15 {
  top: 300px;
  left: 200px;
  -webkit-transform: rotate(40deg);
}
/*健哥*/
.img0 {
  top: 00px;
  left: 280px;
  -webkit-transform: rotate(-10deg);
}

</style>
